<template>
  <MainLayout>
    <template #header v-if="isLoginShow">
      <MyHeader class="shadow" />
    </template>
    <template #menu v-if="isLoginShow">
      <MyMenu />
    </template>
    <template #content>
      <MyBreadCrumb v-if="isLoginShow" />
      <div class="shadow page-container-common">
        <RouterView />
      </div>
    </template>
  </MainLayout>
</template>

<script lang="ts" setup>
import MainLayout from "./components/layout/mainLayout.vue";
import MyHeader from "./components/header/index.vue";
import MyMenu from "./components/menu/index.vue";
import MyBreadCrumb from "./components/myBreadCrumb/index.vue";
import { computed, onMounted } from "vue";
import router from "./router/router";
import { getReflect } from "./utils/common";
onMounted(async () => {
  document.title = import.meta.env.APP_ROOT_NAME;
  // 拿到所有的 实验室  实验室类型 当前学期
  await getReflect();
});
const isLoginShow = computed(() => {
  return router.currentRoute.value.name !== "login";
});
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
.shadow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.page-container-common {
  min-height: calc(100vh - 64px - 16px - 28px - 16px - 16px);
  background: #f5f3f3;
  padding: 16px;
  border-radius: 8px;
}
</style>
